<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/views/modules/commons/head.jsp" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    <!-- 待办任务css -->
    <link rel="stylesheet" href="<s:url value="/assets/web/css/my/mytask.css"></s:url>">
    <!-- 复选框 -->
    <link rel="stylesheet" href="<s:url value="/assets/web/common/lulu_zujian/ui.css"></s:url>">
    <style>
        #content-main {
            padding: 17px 0px;
        }
        .red-point{
            margin-left: 20px;
            font-family: fantasy;
            padding: 3px 10px;
            border-radius: 12px;
            background-color: red;
            color: #fff;
        }
    </style>

    <title>待办任务</title>
</head>
<body style="margin:0;padding: 0;" class="bgcolor">
<%@ include file="/WEB-INF/views/modules/commons/nav.jsp" %>
<%@ include file="/WEB-INF/views/modules/commons/menu.jsp" %>
<table></table>
<div class="av row J_mainContent" id="content-main">
    <c:forEach items="${map}" var="map" varStatus="vs">
        <div class="container">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                       href="#collapseOne${vs.count}">
                            ${map.key}<em>∨</em>
                    </a>
                    <c:set var="flag" value="true" />
                    <c:forEach var="list" items="${map.value}">
                        <c:if test="${list.status == '1'}">
                            <span class="red-point">!</span>
                            <c:set var="flag" value="false"/>
                        </c:if>
                    </c:forEach>
                </div>
                <div id="collapseOne${vs.count}" class="accordion-body collapse ">
                    <table class="project-info">
                        <thead>
                        <tr>
                            <th>节点</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>文件操作</th>
                            <th>上传操作</th>
                            <th>下载操作</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <c:forEach var="list" items="${map.value}" varStatus="sta">
                            <tbody id="index-main${sta.count}">
                            <tr>
                                <td class="node-name">
                                    <p class="hidden-font" title=" ${list.nodeId}${list.nodeName}">
                                            ${list.nodeId}${list.isDelay}--${list.nodeName}
                                    </p>
                                </td>

                                <td style="width: 120px;">${list.planBeginDate}</td>
                                <td style="width: 130px;">${list.factFinishDate}</td>

                                <c:if test="${list.status == '1'}">
                                    <td style="width: 200px;">
                                        <input style="display: inline-block;" id="${list.sysId}" type="file"
                                               name="files"/>
                                    </td>
                                    <td class="upload" data-id="${map.value[0].nodeId}">
                                        上传备件材料
                                    </td>
                                </c:if>
                                <c:if test="${list.status != '1'}">
                                    <td style="width: 250px;">
                                    </td>
                                    <td data-id="${map.value[0].nodeId}">
                                        暂不用上传
                                    </td>
                                </c:if>

                                <c:if test="${empty list.nodeFilter}">
                                    <td>无备件材料</td>
                                </c:if>
                                <c:if test="${!empty list.nodeFilter}">
                                    <td class="download" onclick="downDetail('${list.nodeFilter}')">
                                        下载备件材料
                                    </td>
                                </c:if>
                                <td class="overdue-progress">
                                    <c:if test="${(list.progress)*100<60 && list.status=='1'}">
                                        <div class="progress">
                                            <div class="progress-bar" role="progressbar" aria-valuenow="60"
                                                 aria-valuemin="0" aria-valuemax="100"
                                                 style="width: ${(list.progress)*100}%;">
                                            </div>
                                            <div class="percents"><fmt:formatNumber type="number" value= "${(list.progress)*100}" maxFractionDigits="2" />%</div>
                                        </div>
                                    </c:if>
                                    <c:if test="${60<=(list.progress)*100 &&  (list.progress)*100 < 80}">
                                        <div class="progress">
                                            <div class="progress-bar yellow" role="progressbar" aria-valuenow="60"
                                                 aria-valuemin="0" aria-valuemax="100"
                                                 style="width: ${(list.progress)*100}%;">
                                            </div>
                                            <div class="percents"><fmt:formatNumber type="number" value= "${(list.progress)*100}" maxFractionDigits="2" />%</div>
                                        </div>
                                    </c:if>
                                    <c:if test="${(list.progress)*100 >= 80 && (list.progress)*100 < 100}">
                                        <div class="progress">
                                            <div class="progress-bar red-progress" role="progressbar" aria-valuenow="60"
                                                 aria-valuemin="0" aria-valuemax="100"
                                                 style="width: ${(list.progress)*100}%;">
                                            </div>
                                            <div class="percents"><fmt:formatNumber type="number" value= "${(list.progress)*100}" maxFractionDigits="2" />% (即将逾期)</div>
                                        </div>
                                    </c:if>

                                    <c:if test="${(list.progress)*100 > 100}">
                                        <div class="progress">
                                            <div class="progress-bar red-progress" role="progressbar" aria-valuenow="60"
                                                 aria-valuemin="0" aria-valuemax="100"
                                                 style="width: ${(list.progress)*100}%;">
                                            </div>
                                            <div class="percents"><fmt:formatNumber type="number" value= "${(list.progress)*100}" maxFractionDigits="2" />% (已逾期)</div>
                                        </div>
                                    </c:if>

                                    <c:if test="${list.progress == null}">
                                        <c:if test="${list.status == '2'}">
                                            已完成
                                        </c:if>
                                        <c:if test="${list.status == '1'}">
                                            进行中
                                        </c:if>
                                        <c:if test="${list.status == '0'}">
                                            未开始
                                        </c:if>
                                    </c:if>

                                </td>
                            </tr>
                            </tbody>
                        </c:forEach>
                            <%--<tbody id="index-main">--%>
                            <%--<tr>--%>
                            <%--<td class="node-name" >--%>
                            <%--<p class="hidden-font" title="1.1业主备件">--%>
                            <%--1.1业主备件11111trrrrrrrrrrrrrrrrrrrrrrrrrrrrrr11111111111111111--%>
                            <%--</p>--%>
                            <%--</td>--%>
                            <%--<td>2018.9.1</td>--%>
                            <%--<td style="width: 250px;">--%>
                            <%--<input type="file" >--%>
                            <%--</td>--%>
                            <%--<td>--%>
                            <%--上传备件材料--%>
                            <%--</td>--%>
                            <%--<td>--%>
                            <%--下载备件材料--%>
                            <%--</td>--%>
                            <%--</tr>--%>
                            <%--</tbody>--%>
                    </table>
                </div>
            </div>
        </div>

    </c:forEach>
</div>
<%@ include file="/WEB-INF/views/modules/commons/foot.jsp" %>
<script src="<s:url value="/assets/web/js/ajaxfileupload.js"></s:url>"></script>
<script>
    <%--该表格标题符号事件--%>
    $(".container").on("click", ".accordion-toggle", function () {
        if ($(this).parent().next().hasClass("in")) {
            $(this).children("em").html(" ∨ ");
        } else {
            $(this).children("em").html(" ∧ ");
        }
    });


    //    上传
    //    $("#dialog").hide();
    $(".upload").click(function () {
        var fileval = $(this).prev().children().val();
        console.log(fileval);
        var fileId = $(this).prev().children().attr("id");
        console.log(fileId);
        if (fileval == null || fileval == "") {
            alert("未选择任何文件");
            return;
        }
        var dat = {"nodeSysId": $(this).prev().children().attr("id")};

        $.ajaxFileUpload({
            type: "post",
            fileElementId: fileId,
            secureuri: false,
            dataType: 'json',
            data: dat,
            url: "/upLoad/upload",
            async: false,
            success: function (data) {
                var val = data.data.sysid;
                console.log(val + 111111111);
//                $("#taxproof").attr("value", val);
//                $("#dialog").dialog("close");
                window.location.reload();
                alert("文件上传成功");

            },
            error: function (data) {
//                $("#dialog").dialog("close");
                alert("文件大小超出上传限制（100MB）");
            }

        });
        console.log(dat);

    });

    function downDetail(id) {
        //alert(id);
        var url = "/upLoad/downloadFile/" + id + ".zip";
        window.open(url);
    }


</script>
</body>
</html>
